<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container"></div>
    <p class="label"></p>

    <script>
      function createImage(imgUrl) {
        return new Promise((resolve, reject) => {
          const imgEl = document.createElement("img");
          imgEl.src = imgUrl;

          imgEl.onload = function () {
            resolve(imgEl);
          };
          imgEl.onerror = function (e) {
            reject(new Error("创建失败", e));
          };
        });
      }

      createImage(
        "https://ts3.cn.mm.bing.net/th?id=OIP-C.8tlwbGsJvlNZwGAGL36W8AHaFS&w=295&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
      ).then(
        (imgEl) => {
          const p = document.querySelector(".label");
          p.innerHTML = `${imgEl.width} * ${imgEl.height}`;
        },
        (err) => {}
      );

      createImage(
        "https://ts3.cn.mm.bing.net/th?id=OIP-C.8tlwbGsJvlNZwGAGL36W8AHaFS&w=295&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
      ).then(
        (imgEl) => {
          const containerEl = document.querySelector(".container");
          containerEl.appendChild(imgEl);
        },
        (err) => {}
      );
    </script>
  </body>
</html>
